<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            margin-left: 300px;
            font-size: 10px;
        }
        table{
            margin-top: 20px;
        }
        td{
            width: 180px;
            font-size: 12px;
        }
        .color{
            color: black;
        }
        .w{
            color: white;
        }
    </style>
</head>
<body style="width:1376px;height:768px" id="demo">
    <div>
        <font>颜色名称:</font><input type="text"  id="mc" style="height: 10px;width: 100px">
        <br/>
        <font>颜色数值:</font><input type="text" id="sz" style="height: 10px;width: 100px">
    </div>
    <table border="1" cellpadding="1" cellspacing="2">
        <tr>
            <td><input type="radio" name="color" id="#DDF0ED" onclick="f(this.id)"><font class="color" id="#DDF0ED1">艾利斯兰</font></td>
            <td><input type="radio" name="color" id="#FAEBD7" onclick="f(this.id)"><font class="color" id="#FAEBD71">古董白</font></td>
            <td><input type="radio" name="color" id="#90EE90" onclick="f(this.id)"><font class="color" id="#90EE901">浅绿色</font></td>
            <td><input type="radio" name="color" id="#7FFFD4" onclick="f(this.id)"><font class="color" id="#7FFFD41">碧绿色</font></td>
        </tr>
        <tr>
            <td><input type="radio" name="color" id="#57faff" onclick="f(this.id)"><font class="color" id="#57faff1">天蓝色</font></td>
            <td><input type="radio" name="color" id="#F0EBD5" onclick="f(this.id)"><font class="color" id="#F0EBD51">米色</font></td>
            <td><input type="radio" name="color" id="#F5DEB3" onclick="f(this.id)"><font class="color" id="#F5DEB31">桔黄色</font></td>
            <td><input type="radio" name="color" id="#000000" onclick="f(this.id)"><font class="color" id="#0000001">黑色</font></td>
        </tr>
    </table>
</body>
</html>
<script>
    function f(val) {
        document.getElementById('demo').style.backgroundColor = val;
        document.getElementById('mc').value = document.getElementById(val+"1").innerText;
        document.getElementById('sz').value = val;
        if (val=='#000000') {
            var a = document.getElementsByTagName("font");
            for (var i = 0;i<a.length;i++){
                a[i].className = "w";
            }
        }else {
            var c = document.getElementsByTagName("font");
            for (var d = 0;d<c.length;d++){
                c[d].className = 'color';
            }
        }
    }
</script>